<!-- 查看评价我发布的 -->
<template>
  <view class="my-content evaluate">

    <view class="appraise">
      <!-- 头像部分 -->
      <view class="head">
        <view class="photo">
          <image mode="" :src='serverImageUrl("/static/images/index/WX20230607-235102@2x.png")'></image>
          <text>用户昵称用户</text>
          <image v-for="(item,index) in image" :key="index" :src="item.src" class="img" mode=""></image>
        </view>
        <text>2023-05-30</text>
        <p>诚信度很高，保证金退回及时，交易过程中沟通很顺畅。</p>
      </view>
      <!-- 订单和星星 -->
      <view v-for="(item,index) in appraise" :key="index" class="star">
        <p>
          <table>订单编号:</table>
          <text>{{ item.oreder }}</text>
        </p>
        <p>
          <table>求购询价单:</table>
          <text>{{ item.count }}</text>
        </p>
        <view class="fuwu">
          <view class="_fw">
            <table>综合评价:</table>
            <table>服务态度:</table>
            <table>诚信度:</table>
          </view>
          <view class="_xing">
            <u-rate v-for="(keys,i) in xin" :key="i" :current="keys" :disabled="true"
                    active-color="#F79B29" gutter="27" inactive-color="#E2E2E2" size="35"></u-rate>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 头像旁边的标签
      image: [{
        src: '/static/images/user/v.png'
      },
        {
          src: '/static/images/user/homePage/pyq.png'
        },
        {
          src: '/static/images/index/renzheng.png'
        }
      ],
      //评价信息
      appraise: [{
        oreder: '317378899918000019288',
        count: '日用百货、鞋帽类、儿童拖鞋500双…',

      },],
      //
      xin: {
        one: 2,
        two: 2,
        shree: 2
      }
    };
  },
  onLoad(options) {
    this.$u.api.order.getRateDetail({order_id: 1}).then(res => {
      console.log(res);
    })
  },
  onReady() {
        uni.setNavigationBarTitle({
            title: this.$t("评价")
        })
    },
}
</script>

<style lang="scss" scoped>
uni-page-body {
  height: 100%;
}

.evaluate {
  background: #F9F9F9;
  padding: 33rpx 19rpx 0 20rpx;
}

.appraise {
  width: 100%;
  height: 520rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(230, 230, 230, 0.5);
  display: flex;
  flex-direction: column;

}

.head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 209rpx;
  width: 100%;
  border-bottom: 2rpx solid #E7E7E7;
  box-sizing: border-box;
  padding: 34rpx 0 20rpx 43rpx;
  font-size: $my-font-size21;
  font-weight: 400;
  line-height: 30rpx;

  text {
    color: #787878;
  }

  p {
    color: #353535;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .photo {
    display: flex;

    image:nth-child(1) {
      width: 70rpx;
      height: 70rpx;
    }

    text {
      color: #000000;
      margin-left: 26rpx;
    }

    .img {
      width: 34rpx;
      height: 34rpx;
      margin-left: 15rpx;
    }
  }
}

.star {
  flex: 1;
  padding: 15rpx 0 68rpx 47rpx;
  display: flex;
  flex-direction: column;
  // justify-content: space-between;

  font-size: $my-font-size21;
  font-weight: 400;
  color: #000000;
  line-height: 30rpx;

  table {
    display: inline-block;
  }

  text {
    margin-left: 20rpx;
  }

  p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  p:nth-child(1) {
    margin-bottom: 13rpx;
  }
}

.fuwu {
  display: flex;
  flex: 1;
  // height: 122rpx;
  margin-top: 20rpx;

  ._fw {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  ._xing {
    margin-left: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
</style>